<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学IT - 后台管理系统</title>
  <!-- ✨17.7 给如下 href 多加一个前缀 '/' ->标识为根目录(src)的一个子目录, -->
  <!-- 以免受到url影响, 导致静态资源的请求, 可能是以 'advert' 进行直接请求从而报错~~~ -->
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="/node_modules/nprogress/nprogress.css">
  <link rel="stylesheet" href="/public/less/index.css">

  <!-- 8. 模板引擎改良代码 -->
  {% block style %}
  {% endblock %}
</head>

<body>
  <!-- 8.1 引入 拆分 后的头部HTML模板 -->
  {% include "header.html" %}

  <!-- 主体 -->
  <div class="main">
    <!-- 8.3 引入 拆分 后的侧边栏HTML模板 -->
    {% include "sidebar.html" %}

    <!-- 8.5 layout父级模板 指定一个区块, 子模版(index)再覆盖这个区块 -->
    {% block body %}
    {% endblock %}
  </div>

  <!-- ✨17.7(同步) 顺带JS文件也加 '/' 作为前缀~~~ -->
  <script src="/node_modules/jquery/dist/jquery.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="/node_modules/nprogress/nprogress.js"></script>
  <script src="/public/js/common.js"></script>

  <!-- 8.6 script 图表渲染位置(block 类似 slot占位) -->
  {% block script %}
  {% endblock %}
</body>

</html>